<script setup lang="ts">
import { h } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElButton } from "element-plus";
import { useRouter } from "vue-router";

import EnumTag from "@/components/common/EnumTag.vue";

import ApiCoupon from "@/api/coupon";
import useProTable from "@/hooks/useProTable";

import { EnumCouponStatus, EnumCouponType } from "@/utils/enum";

const router = useRouter();

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  // { label: "票券编码", prop: "coupon_code", minWidth: 120 },
  // { label: "票券图标", slot: "coupon_img", minWidth: 120 },
  {
    label: "类型",
    prop: "coupon_type",
    width: 150,
    // slot: (row: any) => getType(row.coupon_type, "label"),
    slot: ({ row }: any) =>
      h(EnumTag, {
        isText: true,
        value: row.coupon_type,
        options: EnumCouponType,
      }),
  },
  { label: "标题", prop: "coupon_name", minWidth: 160 },
  { label: "副标题", prop: "coupon_subname", minWidth: 160 },

  // { label: "类别", prop: "coupon_category", width: 120, render: (row: any) => getCategory(row.coupon_category, 'label') },
  {
    label: "状态",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumCouponStatus,
        value: row.status,
        effect: "dark",
      }),
  },
  // { label: "优惠面值", prop: "coupon_num", width: 120, render: (row: any) => row.coupon_num && (row.coupon_num + getCategory(row.coupon_category, 'unit')) },
  {
    label: "操作",
    width: 160,
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          type: "primary",
          link: true,
          onClick: () => router.push(`/coupon/modify/${row.id}`),
        },
        "编辑"
      ),
  },
];

const [ProTable] = useProTable({
  fetchUrl: ApiCoupon.list,
  tableOptions: {
    columns: tableColumns,
  },
});
</script>

<template>
  <ProTable>
    <template #tool-left>
      <ElButton
        :icon="Plus"
        type="primary"
        @click="router.push({ name: 'CouponManageCreate' })"
        >新增优惠券
      </ElButton>
    </template>
  </ProTable>
</template>
